<template>
  <div class="page">
      <header class="userinfo_module">
          <img src="@/assets/index_bg.jpg" alt="" class="userinfo_bg"/>
          <div class="userinfo_info">
              <img :src="vkinfo.imgUrl || picture "  class="headpic" />
              <div class="userinfo">
                  <p>姓名：{{vkinfo.customerName}}</p>
                  <p>电话：{{vkinfo.mobile}}</p>
                  <p>所属经销商：{{vkinfo.dealerName}}</p>
              </div>
          </div>
      </header>

      <div class="shop_module" @click="goShop">
          <span>购车商城</span>
          <img src="@/assets/shop_bg.png" alt="" class="shop_bg" />
      </div>
      <div class="gray_padding_15"></div>
      <div class="title">我的成就</div>

      <div class="achieve_module">
        <ul class="achieve_list">
            <li>
                <p class="achieve_title">成功推荐客户</p>
                <p class="achieve_num"><span><strong>{{achievement.successNum}}</strong></span>人</p>
            </li>
            <li>
                <p class="achieve_title">累计收益</p>
                <p class="achieve_num"><span><strong>{{achievement.income}}</strong></span>元</p>
            </li>
            <!-- <p class="achieve_line"></p> -->
        </ul>
      </div>

      <div class="gray_padding_15"></div>
      <div class="title">推荐客户</div>

      <div class="list" v-for="(item,index) in recommendList" :key="item.business_id">
        <div class="top">
            <p class="clue_title">推荐线索：<span>{{item.name}}</span>&emsp;<span>{{item.phone}}</span></p>
            <p class="clue_date">{{item.time}}</p>
        </div>
        <div class="top">
            <p class="neck clue_id"><span>线索编号：{{item.clueId}}</span><span>待领取奖励：{{item.num}}</span></p>
        </div>
        <div class="top">
            <p class="clue_title clue_id">经销商：<span>{{item.dealer}}</span></p>
        </div>
        <div class="top">
            <div class="step_box">
                 <img :src="item.status | transImg" style="width:100%;height:auto"/>
            </div>
            <div class="step_btn reds" v-if="numCount(item.status) == 0"  @click="showList(index,item)"><img src="@/assets/down.png"/></div>
             <div class="step_btn show" v-else>还差{{numCount(item.status)}}步<br/>领取奖励</div>

        </div>
        <div class="wrapBox" v-show="index == num">
            <div class="Listinfo" v-for="item in clueList" :key="item.id">
                <div class="info consts">{{item.brand}}</div>
                <div class="info">{{item.saleTime}}</div>
                <div :class="[setStatus(item.STATUS,item.rewardsType) == '领取奖励' ? 'blues' : 'info']" @click="alert(item)">{{setStatus(item.STATUS,item.rewardsType)}}</div>
            </div>
        </div>
         <span class="error" v-if="item.status === '已废弃' || item.status === '已战败' || item.status === '重复' ">失败原因：推荐失败</span>
      </div>
        <div v-if="showalert">
            <div class="gray">
            </div>
            <div class="white">
              <img src="@/assets/reward.png" alt="" />
            </div>
            <div class="infotips"  v-for="item in queryrecord" :key="item.id">
                <p class="textname">您的好友：{{item.customerName}}</p>
                <p class="textname">成功购买了{{item.str}}</p>
                <p><strong>请选择您的奖励</strong></p>
                <div class="selects">
                    <div class="onle" @click.stop="btnSelect(1)">
                        <p :class="{'backOkOne' : backOkOne}"></p>
                        <div>
                            <p>积分奖励</p>
                            <p>{{item.jf}}积分</p>
                        </div>
                    </div>
                    <div class="onle" @click.stop="btnSelect(2)">
                        <p :class="{'backOkTwo' :backOkTwo}"></p>
                        <div>
                            <p>现金奖励</p>
                            <p>{{item.jq}}元</p>
                        </div>
                    </div>
                </div>
                <button class="Determine" @click="Submission">确定</button>
            </div>
            <div class="closeA" @click="hidealert">
              <img src="@/assets/closeX.png" alt="" />
            </div>
            </div>
            <!-- 积分弹出 -->
           <div v-if="integralalert">
            <div class="gray">
            </div>
            <div class="white">
              <img src="@/assets/reward.png" alt="" />
            </div>
            <div class="infotips">
                <p class="textname">请在首页-会员活动</p>
                <p class="textname">查看积分或者积分到账情况</p>
                <button class="Determine" @click="sure">确定</button>
            </div>
            <!-- <div class="closeA" @click="hidealert">
              <img src="@/assets/closeX.png" alt="" />
            </div> -->
            </div>
            <!-- 现金弹出 -->
            <div v-if="cashalert">
            <div class="gray">
            </div>
            <div class="white">
              <img src="@/assets/reward.png" alt="" />
            </div>
            <div class="infotips">
                <p class="textname">请在首页-会员活动</p>
                <p class="textname">我的余额中体现</p>
                <button class="Determine" @click="sure">确定</button>
            </div>
            <!-- <div class="closeA" @click="hidealert">
              <img src="@/assets/closeX.png" alt="" />
            </div> -->
            </div>
      <div class="public_undata" v-if="recommendList && recommendList.length <= 0">
          <img src="@/assets/icon_car.png" alt="" />
          <p>您还未邀请过客户<br/>赶快去购车商城推荐客户吧!</p>
      </div>
  </div>
</template>
<script>
import { getRecommend, queryClueList, queryMyReward, vktokeninfo, selectReward, queryActualsale } from '@/api/api'
import picture from '@/assets/default_headpic.png'
export default {
  name: '',
  data () {
    return {
      picture: picture,
      num: -1,
      upNum: -1,
      recommendList: [],
      recommend: [],
      achievement: {},
      vkinfo: {},
      imgUrl: null,
      status: 2,
      clueList: [],
      backOkOne: false,
      backOkTwo: false,
      showalert: false,
      queryrecord: [],
      integralalert: false,
      cashalert: false,
      ZeroRecommend: false,
      select: '',
      ticketValue: '',
      memberId: '',
      saleId: '',
      fail: false
    }
  },
  created () {
    this.getToken()
  },
  mounted () {
  },
  methods: {
    getCookie (name) {
      var strcookie = document.cookie // 获取cookie字符串
      var arrcookie = strcookie.split(';') // 分割
      // 遍历匹配
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split('=')
        if (arr[0] === name) {
          return arr[1]
        }
      }
      return ''
    },
    getToken () {
      this.ticketValue = this.getCookie('FOTONTGT')
      let tokenparam = {
        ticketName: 'FOTONTGT',
        ticketValue: this.ticketValue || '',
        isVeeker: '0'
      }
      // 时代微客token
      vktokeninfo(tokenparam).then(res => {
        this.vkinfo = res.data
        this.memberId = res.data.memberId || ''
        this.getDetail(this.memberId)
        this.getAward(this.memberId)
      })
    },
    getDetail () {
      let param = {
        memberID: this.memberId,
        type: '荐购'
      }
      // 推荐记录接口
      getRecommend(param).then(res => {
        this.recommendList = JSON.parse(res.data)
      })
    },
    getAward () {
      let param = {
        memberId: this.memberId
      }
      // 我的奖励记录接口
      queryMyReward(param).then(res => {
        let datas = res.data
        this.achievement = datas
      })
    },
    goShop () {
      this.$router.push({path: '/shoplist'})
    },
    getClueList (item) {
      // 根据线索号查询成交记录接口
      let clueparam = {
        siebelId: item.clueId
      }
      queryClueList(clueparam).then(res => {
        let clueList = JSON.parse(res.data)
        this.clueList = clueList
      })
    },
    showList (e, item) {
      let that = this
      if (that.upNum === e) {
        that.upNum = that.num = -1
      } else {
        that.upNum = that.num = e
      }
      this.getClueList(item)
    },
    numCount (status) {
      if (status === '' || status === '待清洗' || status === '清洗中' || status === '待下发' || status === '已下发' || status === '已分配') {
        return 3
      } else if (status === '已跟进' || status === '冷线索') {
        return 2
      } else if (status === '已进店' || status === ' 已成交未实销 ') {
        return 1
      } else if (status === '已成交已实销') {
        return 0// 代处理
      } else if (status === '已废弃' || status === '已战败') {
        return 1
      } else if (status === '重复') {
        return 1
      }
    },
    setStatus (e, n) {
      if (e === '1') {
        if (n === '1') {
          return '积分已领取'
        } else if (n === '2') {
          return '现金已领取'
        }
      } else if (e === '2') {
        return '领取奖励'
      }
    },
    // 选择奖励的接口
    queryActualsalerecord (id) {
      this.saleId = id
      let selectparam = {
        saleID: id,
        memberId: this.memberId,
        selectRward: this.select
      }
      queryActualsale(selectparam).then(res => {
        let queryrecord = JSON.parse(res.data)
        this.queryrecord = queryrecord
      })
    },
    // 展示弹框
    alert (item) {
      if (item.STATUS === '2') {
        this.queryActualsalerecord(item.saleId)
        this.showalert = true
      }
    },
    // 关闭弹窗
    hidealert (item) {
      this.showalert = false
    },
    sure () {
      this.integralalert = false
      this.cashalert = false
      // 推荐记录接口
      this.getDetail(this.memberId)
    },
    // 勾选积分和现金
    btnSelect (e) {
      let that = this
      if (e === 1) {
        that.select = '1'
        that.backOkOne = !that.backOkOne
        that.backOkTwo = false
      } else if (e === 2) {
        that.select = '2'
        that.backOkTwo = !that.backOkTwo
        that.backOkOne = false
      }
    },
    // 点击确定掉接口传值到后台弹框
    Submission (e) {
      if (this.select === '') {
        console.log('不能为空')
      }
      let selethree = {
        saleID: this.saleId,
        memberId: this.memberId,
        selectRward: this.select
      }
      selectReward(selethree).then(res => {
        console.log(res)
        if (res.code === 0) {
          if (this.select === 1) {
            this.integralalert = true
            this.showalert = false
          } else {
            this.cashalert = true
            this.showalert = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>

.userinfo_module{
    width:100%;
    height:auto;
    position: relative;
}
.userinfo_bg{
    width:100%;
    height:auto;
    display: block;
}
.userinfo_info{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    width:100%;
    display:flex;
    direction: ltr;
}
.headpic{
    width:124px;
    height:124px;
    border-radius: 50%;
    border:1px solid #AED7FF;
    display: block;
    /* float:left; */
    margin:66px 38px 0 58px;
}
.userinfo{
    width:500px;
    height:auto;
    /* float:left; */
    margin:76px 0 0 0;
    color: #fff;
}
.userinfo > p{
    /* line-height: 40px; */
    margin-bottom: 6px;
    line-height: 32px;
}
.shop_module{
    width:92.6%;
    height:250px;
    padding:0 3.7%;
}

.shop_module > span{
    display: block;
    padding:19px 0 17px 0;
    font-weight: bold;
}

.shop_bg{
    width:100%;
    height:176px;
    display: block;
}

.achieve_module{
    width:92.6%;
    height:125px;
    padding:0 3.7%;
    /* border-top:13px solid #EFEFF7; */
    /* border-bottom:15px solid #EFEFF7; */
}

.achieve_module > span{
    padding:15px 0 15px 0;
    display: block;
    font-weight: bold;
    border-bottom:1px solid #e7e7e7;
    /* font-size:24px; */
}

.achieve_list{
    width:100%;
    height:120px;
    position: relative;
}

.achieve_list > li{
    width:50%;
    height: inherit;
    float:left;
}

.achieve_title{
    width:100%;
    padding:28px 0 15px 0;
    color: #818791;
    font-size: 22px;
    text-align: center;
}

.achieve_num{
    text-align: center;
    font-size: 30px;
    color: #FF4700
}

.achieve_line{
    position: absolute;
    left:49.5%;
    top:41px;
    width:2px;
    height:44px;
    background: #e7e7e7;
    z-index: 999;
}

.title{
    width:92.6%;
    padding:19px 3.7%;
    border-bottom:1px solid #e7e7e7;
    font-weight:bold;
}

.list{
    width:91%;
    height:auto;
    min-height: 220px;
    border-bottom:1px solid #e7e7e7;
    padding:25px 4.5%;
    /* background: #f00; */
}

.top,.neck{
    width:100%;
    height:auto;
    clear: both;
    display: flex;
    justify-content: space-between;
}

.clue_title{
    float: left;
}

.clue_date{
    float:right;
    font-size: 22px;
    padding-top: 4px;
}

.clue_id{
    clear: both;
    padding-top: 8px;
}
.main{
    width:100%;
    height:100px;
    padding-bottom:20px;
}
.step_box{
    width:500px;
    height:75px;
    float: left;
    margin:21px 0 0 0px;
}
.step_box img{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.step_btn{
    padding: 0 30px;
    height:80px;
    margin-top:14px;
    float: right;
    border-radius: 5px;
    text-align: center;
    font-size: 21px;
}

.green_btn{
    background: #0FCE5C;
    line-height: 80px;
    color: #fff;
}

.show{
    background: #ccc;
    display: flex;
    align-items: center;
    text-align: center;
}
.reds{
    width: 50px;
    display: flex;
    align-items: center;
    text-align: center;
}
.reds img{
    display: inline;
    width: 100%;
    height: auto;
}
.gray_btn{
    background: #ddd;
    line-height: 80px;
    color: #9b9b9b;
}

.yellow_btn{
    background: #FF9600;
    line-height: 80px;
    color: #fff;
}

.padding_height{
    padding-top:12px;
    height:68px;
    line-height: 30px;
}

.step{
    width:25%;
    height:75px;
    float: left;
    text-align: center;
    position: relative;
    z-index: 4;
}

.step > img{
    width:33px;
    height:auto;
    display: block;
    margin:0 auto;
}

.step_text{
    font-size: 20px;
    margin-top: 16px;
}

.error{
    width:100%;
    height:auto;
    color:#FF3A3A;
    padding:18px 0 34px;
}

.step_line{
    position: absolute;
    left:50%;
    top:15px;
    width:110px;
    height:3px;
    z-index: -1;
}

.gray_line{
    background: #b5b5b5;
}

.green_line{
    background: #0FCE5C;
}

.red_line{
    background: #f00;
}
.Listinfo{
    width:100%;
    display: flex;
    height:100px;
    justify-content: space-between;
    align-items: center;
}
.Listinfo .info:first-child{
    width: 130px;
}
.Listinfo .info:last-child{
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #ff8603;
    color: white;
    border-radius: 4px;
}
.list .blues{
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #0497ff;
    color: white;
    border-radius: 4px;
}
</style>
